import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
import { NzNotificationService } from 'ng-zorro-antd';
import { TmsgService } from 'src/app/service/tmsg.service';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {

  rotate:boolean = false;
  @ViewChild("table",{ static:false })
  table:ElementRef;

  @ViewChild("phone",{ static:false })
  phone:ElementRef;

  left:string = '0px';
  leftVal:number = 0;

  tableWidth:string = '200px';
  tableWidthVal:number = 200;

  tableHeight:string = '300px';
  tableHeightVal:number = 300;

  phoneWidth:string= '400px';
  phoneWidthVal:number = 400;

  tableRight:string = '100px';
  tableRightVal:number = 100;

  tplMsgBPUrl:string='https://www.xdfznh.club/wxpadfe/bpDtl?mill=朗迪印染&billCode=BPR191018004&clientSid=1336';

  constructor(
    private noti:NzNotificationService,
    private tmsg:TmsgService
  ) { 
    this.tableHeightVal = this.tableHeightVal + 50 * 8;
    this.tableHeight = this.tableHeightVal + 'px';
  }

  ngOnInit() {
  }

  ngAfterViewInit(): void {
    setTimeout(() => {
      this.autoTest();
    }, 3000);
  }

  doRotate():boolean{
    this.rotate = !this.rotate;
    // alert(this.rotate);
    return this.rotate;
  }

  move(){
    this.leftVal = this.leftVal + 20;
    this.left = this.leftVal +'px';
  }


  shrinkBody(){

    const width = document.body.clientWidth;
    this.noti.blank('通知：','缩小前，body.width = ' + width);

    const width1 = document.body.clientWidth - 1000;
    this.noti.blank('通知：','缩小后，body.width = ' + width1);
  }


  sendMsg(){
    this.tmsg.doSend();
  }

  rptSize(){
    const body = 'body.width = ' + document.body.clientWidth + ',body.height=' + document.body.clientHeight;
    alert(body);

    const phone = 'phone.width = ' + this.phone.nativeElement.clientWidth 
      + ',phone.height=' + this.phone.nativeElement.clientHeight;
    alert(phone);

    const table = 'table.width = ' + this.table.nativeElement.clientWidth 
      + ',table.height=' + this.table.nativeElement.clientHeight;
    alert(table);
  }

  incrTable(){
    this.tableWidthVal = this.tableWidthVal + 50;
    this.tableWidth = this.tableWidthVal + 'px';
  }

  reduTable(){
    this.tableWidthVal = this.tableWidthVal - 50;
    this.tableWidth = this.tableWidthVal + 'px';
  }

  incrHeight(){
    this.tableHeightVal = this.tableHeightVal + 50;
    this.tableHeight = this.tableHeightVal + 'px';
  }

  reduHeight(){
    this.tableHeightVal = this.tableHeightVal - 50;
    this.tableHeight = this.tableHeightVal + 'px';
  }

  printTable(){
    console.log(this.table.nativeElement.offset);
  }


  refreshLayout(){
    this.phoneWidthVal = this.tableHeightVal + 50;
    this.phoneWidth = this.phoneWidthVal + 'px';

    this.leftVal = this.phoneWidthVal - 50;
    this.left = this.leftVal + 'px';
  }

  scrollTop(){
    this.phone.nativeElement.scrollTop = 0;
  }

  scrollRight(){
    // alert("即将向右滚动" + this.tableHeightVal);
    this.phone.nativeElement.scrollLeft = this.tableHeightVal;
  }


  // 页面初始化时调用，自动旋转设置高度并且滚动到最右边
  autoTest(){
    this.doRotate();// 旋转



    // this.phoneWidthVal = this.tableHeightVal + 100;
    // this.phoneWidth = this.phoneWidthVal + 'px';


    // this.leftVal = this.tableHeightVal+ 50;
    const tableHeight = this.table.nativeElement.clientHeight;
    this.leftVal = tableHeight + 50;
    // alert('移动了' + this.leftVal);
    this.left = this.leftVal +'px';

    this.scrollRight();
    
  }


  // 测试发送带有成品发货详细数据的消息
  sendTmpMsg(){
    this.tmsg.sendTmpDtl('https://www.xdfznh.club/wxpadfe/soDtlt?billCode=F191019008');
  }


  bpDtl(){
    // this.tmsg.sendTmpDtl('https://www.xdfznh.club/wxpadfe/bpDtl?mill=朗迪印染&billCode=BPR191018004&clientSid=1336');
    this.tmsg.sendTmpDtl(this.tplMsgBPUrl);    
  }
}
